<template>
  <div class="section">
    <div class="section-header" @click="onClick">
      <div class="section-header__decoration" v-if="type" :class="type" />
      <slot v-else name="decoration"></slot>

      <div class="section-header__content">
        <span
          :style="{ 'font-size': titleFontSize, color: titleColor }"
          class="section__content-title"
          :class="{ distraction: !subTitle }"
        >{{ title }}</span
        >
        <span
          v-if="subTitle"
          :style="{ 'font-size': subTitleFontSize, color: subTitleColor }"
          class="section-header__content-sub"
        >{{ subTitle }}</span
        >
      </div>

      <div class="section-header__slot-right">
        <slot name="right"></slot>
      </div>
    </div>

    <div class="section-content" :style="{ padding: _padding }">
      <slot />
    </div>
  </div>
</template>

<script>
/**
 * Section 标题栏
 * @description 标题栏
 * @property {String} type = [line|circle|square] 标题装饰类型
 * 	@value line 竖线
 * 	@value circle 圆形
 * 	@value square 正方形
 * @property {String} title 主标题
 * @property {String} titleFontSize 主标题字体大小
 * @property {String} titleColor 主标题字体颜色
 * @property {String} subTitle 副标题
 * @property {String} subTitleFontSize 副标题字体大小
 * @property {String} subTitleColor 副标题字体颜色
 * @property {String} padding 默认插槽 padding
 */

export default {
  name: 'Section',
  emits: ['click'],
  props: {
    type: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      required: true,
      default: ''
    },
    titleFontSize: {
      type: String,
      default: '16px'
    },
    titleColor: {
      type: String,
      default: 'rgba(0, 0, 0, 0.85)'
    },
    subTitle: {
      type: String,
      default: ''
    },
    subTitleFontSize: {
      type: String,
      default: '12px'
    },
    subTitleColor: {
      type: String,
      default: 'rgba(0, 0, 0, 0.45)'
    },
    padding: {
      type: [Boolean, String],
      default: false
    }
  },
  computed: {
    _padding () {
      if (typeof this.padding === 'string') {
        return this.padding
      }

      return this.padding ? '10px' : ''
    }
  },
  methods: {
    onClick () {
      this.$emit('click')
    }
  }
}
</script>
<style lang="less" >
@import '~ant-design-vue/es/style/themes/default.less';
.section {
  background-color: #fff;
  .section-header {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 0;
    font-weight: normal;
    .section__content-title {
      font-weight: bold;
    }
    &__decoration {
      margin-right: 6px;
      background-color: @primary-color;
      &.line {
        width: 4px;
        height: 16px;
        border-radius: 10px;
      }

      &.circle {
        width: 10px;
        height: 10px;
        border-top-right-radius: 50px;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
      }

      &.square {
        width: 10px;
        height: 10px;
      }
    }

    &__content {
      display: flex;
      flex-direction: column;
      flex: 1;
      color: #333;

      .distraction {
        flex-direction: row;
        align-items: center;
      }
      &-sub {
        margin-top: 2px;
      }
    }

    &__slot-right {
      font-size: 14px;
    }
  }

  .section-content {
    font-size: 14px;
  }
}
</style>
